<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>JT2</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
      .interactionSearch-header-left {
        position: absolute;
          width: 0.32rem;
          height: 0.6rem;
          position: absolute;
          left: 0.32rem;
          top: 0.12rem;
      }
      .interactionSearch-header-left img {
        width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
      }
      .interactionSearch-header-right {
        position: absolute;
          right: 0.32rem;
          /* height: 0.52rem; */
          top: 0.12rem;
      }
      .interactionSearch-header-right img {
        width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.2rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .interactionSearch-list {
          /* margin: 0 0.32rem; */
          padding-top: 1.1rem;
      }
      .interactionSearch-list ul {
          overflow: hidden;
          list-style: none;
          margin: 0;
          padding: 0;
      }
      .interactionSearch-list ul li:first-child{
        margin-top: 0;
      }
      .interactionSearch-list ul .contentLi {
        /* margin-top: 0.3rem; */
        margin: 0.3rem 0.32rem ;
      }
      .interactionSearch-list ul .contentLi .contentLi-title {
        text-overflow: -o-ellipsis-lastline;  
        overflow: hidden;  
        text-overflow: ellipsis;  
        display: -webkit-box;  
        -webkit-line-clamp: 3;  
        -webkit-box-orient: vertical; 
        word-break:break-all;
      }
      .interactionSearch-list ul .contentLi .contentLi-title img{
        width: 0.48rem;
        height: 0.32rem;
        vertical-align: middle;
      }
      .interactionSearch-list ul .contentLi .contentLi-explain {
          position: relative;
          height: 0.52rem;
      }
      .interactionSearch-list ul .contentLi .contentLi-explain-left span:nth-child(2){
        font-family: PingFangSC-Regular;
        font-size: 0.24rem;
        color: #638CBB;
        letter-spacing: 0;
        text-align: left;
        line-height: 0.34rem;
      }
      .interactionSearch-list ul .contentLi .contentLi-explain-right {
        position: absolute;
        right: 0;
        top:0.08rem;
      }
      /*  */
      .interactionSearch-header {
    height: 1.1rem;
    padding: 0.12rem 0.32rem 0.38rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}
.interactionSearch-header-right input{
  width: 5rem;
  border-radius: 0.04rem;
  border-radius: 0.04rem;
  padding-left: 0.6rem;
  font-family: PingFangSC-Regular;
  font-size: 0.26rem;
  letter-spacing: 0;
  text-align: left;
  margin-right: 0.3rem;
  line-height: normal;
}
.interactionSearch-list ul .contentLi .contentLi-title span{
  /* display: inline-block; */
  vertical-align: middle;
  font-family: PingFangSC-Medium;
  font-size: 0.3rem;
  line-height: 0.42rem;
}
.interactionSearch-list ul .contentLi .contentLi-subtitle {
  margin-top: 0.2rem;
  margin-bottom: 0.22rem;
  font-family: PingFangSC-Regular;
  font-size: 0.26rem;
  letter-spacing: 0;
  text-align: left;
  line-height: 0.4rem;
  text-overflow: -o-ellipsis-lastline;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  display: -webkit-box;  
  -webkit-line-clamp: 3;  
  -webkit-box-orient: vertical; 
}
.interactionSearch-list ul .contentLi .contentLi-explain-right span {
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
}
.interactionSearch-list ul .contentLi .contentLi-explain-left{
  position: absolute;
  left: 0;
  padding: 0.1rem 0.16rem 0.08rem 0.16rem;
}
.interactionSearch-list ul .contentLi .contentLi-explain-left span:nth-child(1){
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  letter-spacing: 0;
  text-align: left;
  line-height: 0.34rem;
}
.interactionSearchblankLi {
  height: 0.14rem;
}
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
  <!--具体代码-->
  <!-- 头部 -->
  <div class="interactionSearch-header">
    <div class="interactionSearch-header-left">
        <img src="../../images/allPic/jiantou.png" alt="" onclick="closeWindow()" class="headerimg">
    </div>
    <div class="interactionSearch-header-right">
        <img src="../../images/allPic/chaxun.png" alt="">
        <input type="text" placeholder="请输入您感兴趣的内容" id='searchWord'>
        <span onclick="searchList()" style='vertical-align: middle;'>搜索</span>
    </div>
  </div>

  <!-- 互动列表 -->
  <div class="interactionSearch-list">
      <ul>
      </ul>
  </div>
</div>
</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let pageNum = 1
  let searchWord
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {

    //设置深色模式
    if(configColorType === '1'){
        $('.headerimg').attr('src','../../images/allPic/blackfanhui.png')
    }else{
        $('.headerimg').attr('src','../../images/allPic/jiantou.png')
    }

  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {

  }
  //节流
  let prev = Date.now()
  function throttle (fn, delay) {
  const now = Date.now()
  if (now - prev > delay) {
    fn()
    prev = Date.now()
  }
}
  //点击搜索按钮
  function searchList(){
    throttle(() => {
      pageNum = 1
      $('.interactionSearch-list ul').empty()
      searchWord = $('#searchWord').val().trim()
      if(searchWord){
        getList({'searchWord':searchWord,'pageNum':pageNum})
      }else{
          jsBridge.toast('搜索内容不能为空...')
      }     
    },1000)
    
  }
  //获取互动列表
  function getList(params){
    Server.getElseList.getSearchList({'searchWord':params.searchWord,'pageNum':params.pageNum,'pageSize':10}).then(res => {
      console.log(res)
      if(res.code === 0){
        let list = res.list
        if(list.length !== 0){
            list.map((item,index) => {
            //获取每个interactionType对应的名字,需要自己手动加
            if(item.interactionType === '1'){
              item.interactionTypeName = '交易所互动'
            }else if(item.interactionType === '2'){
              item.interactionTypeName = '公司发声'
            }else if(item.interactionType === '3'){
              item.interactionTypeName = '记者采访'
            }else if(item.interactionType === '4'){
              item.interactionTypeName = '话题'
            }else if(item.interactionType === '5'){
              item.interactionTypeName = '传闻求证'
            }
            //修改时间
            let creatTime = item.issuerDttm*1000           
            let nowTime = +new Date().valueOf()
            let year = new Date(creatTime).getFullYear()
            let month = new Date(creatTime).getMonth()+1<10?'0'+(new Date(creatTime).getMonth()+1):new Date(creatTime).getMonth()+1
            let day = new Date(creatTime).getDate()<10?'0'+new Date(creatTime).getDate():new Date(creatTime).getDate()
            let hour = new Date(creatTime).getHours()<10?'0'+ new Date(creatTime).getHours(): new Date(creatTime).getHours()
            let minute = new Date(creatTime).getMinutes()<10?'0'+new Date(creatTime).getMinutes():new Date(creatTime).getMinutes()
            if(nowTime - creatTime < 30*60*1000){
              if(nowTime - creatTime < 1*60*1000){
                item.issuerDttm = '刚刚'
              }else{
                item.issuerDttm = parseInt((nowTime - creatTime)/1000/60)+'分钟前'
              }
            }else if(nowTime - creatTime < 24*60*60*1000){
                if(nowTime-creatTime < 60*60*1000){
                  item.issuerDttm = '1小时前'
                }else {
                  item.issuerDttm = parseInt((nowTime - creatTime)/1000/60/60)+'小时前'
                }
            }else if(new Date().getDate()-new Date(creatTime).getDate()==1 && new Date().getMonth()==new Date(creatTime).getMonth() && new Date().getFullYear() == new Date(creatTime).getFullYear()){
              item.issuerDttm = '昨天'+hour+":"+minute
            }else{
              item.issuerDttm = year+'-'+month+'-'+day+' '+hour+':'+minute
            }
          })
          // console.log(list,'list')

          list.map((v,i) => {
            let li = `<li class="contentLi" onclick="godetails({'infoId':'${v.infoId}','interactionType':'${v.interactionType}'})">
                <div class="contentLi-title">
                  <div style='display:inline-block;vertical-align: middle;'>
                    <!-- 交易所互动 -->
                    <img src="../../images/allPic/tiwen.png" alt="" style="width:0.32rem;height: 0.32rem;display:${v.interactionType==='1'?'block':'none'}">
                    <!-- 公司发声 -->
                    <img src="../../images/allPic/gonggao.png" alt="" style="width: 0.48rem;height: 0.32rem;display:${v.interactionType==='2'?'block':'none'}">
                    <!-- 公司采访 -->
                    <img src="../../images/allPic/makefeng.png" alt="" style="width:0.30rem;height: 0.34rem;display:${v.interactionType==='3'?'block':'none'}">
                    <!-- 话题 -->
                    <img src="../../images/allPic/huati.png" alt="" style="width:0.32rem;height: 0.32rem;display:${v.interactionType==='4'?'block':'none'}">
                    <!-- 传闻求证 -->
                    <img src="../../images/allPic/shipin.png" alt="" style="width:0.34rem;height: 0.22rem;display:${v.interactionType==='5'?'block':'none'}">
                  </div>
                    <span style="margin-left:0.1rem;">${v.mainTitle}</span>
                </div>
                <div class="contentLi-subtitle">
                    <span style='display:${v.interactionType==='1'?'none':'block'}'>${v.interactionIntroduce?v.interactionIntroduce:''}</span>
                    <span style='display:${v.interactionType==='1'?'block':'none'}'><span style='color:#538DC0;margin-right:0.2rem;'>${v.owner}</span><span>回复:</span>${v.interactionIntroduce?v.interactionIntroduce:''}</span>
                </div>
                <div class="contentLi-explain">
                  <div class="contentLi-explain-left">
                      <span>来自：</span><span>${v.interactionTypeName}</span>
                  </div>
                  <div class="contentLi-explain-right">
                      <span>${v.issuerDttm}</span>
                  </div>
                </div>
            </li>
            <li class="interactionSearchblankLi"></li>`
            $('.interactionSearch-list ul').append(li)
          })
        }else if(list.length === 0 && pageNum === 1){
                jsBridge.toast('暂无数据')
        }else{
          
        }
      }
    })
  }
  //点击某一项去对应的详情页面
  function godetails(params){
    console.log(params)
    if(params.interactionType === '1'){
      jsBridge.openWindow('/html/interaction/Interactiondetails.html?infoId='+params.infoId+'&isopencomment=0',{}, {noBar: false})
    }else if(params.interactionType === '2'){
      jsBridge.openWindow('/html/phonation/phonationdetails.html?infoId='+params.infoId+'&isopencomment=0',{}, {noBar: false})
    }else if(params.interactionType === '3'){
      jsBridge.openWindow('/html/interview/interviewdetails.html?infoId='+params.infoId+'&isopencomment=0',{}, {noBar: false})
    }else if(params.interactionType === '4'){
      jsBridge.openWindow('/html/topic/topicdetails.html?infoId='+params.infoId+'&isopencomment=0',{}, {noBar: false})
    }else if(params.interactionType === '5'){
      jsBridge.openWindow('/html/hearsay/hearsaydetails.html?infoId='+params.infoId+'&isopencomment=0',{}, {noBar: false})
    }
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //滑动加载下一页
  document.addEventListener('scroll',function(){
  let top = $('.interactionSearch-list ul').offset().top      
  let height = $('.interactionSearch-list ul').outerHeight(true)
  let maxHeight = document.body.offsetHeight
  let scroll = $(document).scrollTop()
  // console.log(scroll,'scroll')
  // console.log(top,'top')
  // console.log(height,'height')
  // console.log(maxHeight,'maxHeight')
  // console.log(top+height-maxHeight,'top+height-maxHeight')
  if(Math.round(top+height-maxHeight) === Math.round(scroll) ){
    pageNum++
    getList({'searchWord':searchWord,'pageNum':pageNum})
  }
})
</script>
</html>